<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <div class="box">

    </div>
    <button>确定</button>
    <p>我是ppp</p>
    <ul>
        <li>1112111</li>
        <li>2222222</li>
        <li>3333333</li>
        <li>4444444</li>
        <li>5555555</li>
        <li>6666666</li>
    </ul>
    <script>
        // 节点.事件名 = 事件处理函数（普通函数   就是因为赋值给事件了 所以叫他事件处理函数，只有事件触发了才会执行）
        // onclick  点击事件
        // let p = document.querySelector("p")
        // p.onclick = function(){
        //     console.log(111111);
            
        // }
        // let div = document.createElement("div")
        // div.innerHTML = "qichuangle"
        // div.onclick = function(){//给新创建的节点绑定事件
        //     console.log(222222);
            
        // }
        // document.querySelector("body").appendChild(div)

        let button = document.querySelector("button")
        button.onclick = function(){
            //在事件处理函数中  有一个独有的  this
            //this 代表事件源 谁触发的事件谁就是事件源
            console.log(this);
            

            if (this.innerHTML == "确定") {
                this.innerHTML = "取消"
            }else{
                this.innerHTML = "确定"
            }
            
        }
        

    </script>
</body>
</html>